<!-- Author:Rain -->
<template>
    <el-dialog id="baobiao" v-model="visible" :show-close="false" width="900">
        <template #header="{ titleId, titleClass }">
            <div class="my-header">
                <h4 :id="titleId" :class="titleClass">AI生成报表</h4>
            </div>
        </template>
        <div class="flex-center">
            <p style="text-indent: 2em;">
                作为ForJob科技有限公司的招聘经理，我们的目标是确保公司的人才库与业务需求同步增长。通过深入分析招聘数据，我们可以更好地理解招聘流程的效率，识别改进领域，并制定战略以吸引和保留顶尖人才。以下是对当前招聘周期的全面分析。
            </p>
            <img :src="imgData[0]" style="width:800px" alt="">
            <p style="text-indent: 2em;">
                在各个岗位的应聘情况方面，我们可以看到在4月03日至10日之间，Web前端开发岗位的投递量呈现出先升后降的趋势，其中在4月04日出现了峰值，达到了约180次的申请；而UI设计部门的申请数量整体上呈下滑趋势，自4月03日的约100次下降至4月10日大约60次的申请量；JAVA后端岗位的申请量也是降低趋势，由4月03日的约120次申请减少至4月10日的约80次;至于产品经理岗位，其在4月03日至09日期间表现较为稳定，天天大约有40次申请，然而在4月10日略有下降。
            </p>
        </div>
        <div class="flex-center">
            <img :src="imgData[1]" style="width:400px" alt="">
            <p style="text-indent: 2em;">
                这是一个漏斗模型的图像，用于表示不同阶段的转化率。从上到下的颜色分别为红色、黄色和绿色，每种颜色代表一个阶段。漏斗的每个部分都有相应的标签，描述了该阶段的内容。就目前来看，公司已经完成了共计773人的招聘，其中有445位优秀人才顺利入职，这是我们值得骄傲的成绩。在整个招聘流程中，我们收到了545封求职信函，经过筛选，将其中421封定级为合格，经过进一步评估，最终有357位应聘者通过了面试，得到了录用机会。
            </p>
        </div>
        <div class="flex-center">
            <img :src="imgData[2]" style="width:400px" alt="">
            <p style="text-indent: 2em;">关于候选人的工作或实习年限分布，1年以下工作经验: 17%、1-2年工作经验: 28%、2-3年工作经验: 25%、3-5年工作经验:
                10%、5-8年工作经验:
                15%、8年以上工作经验: 5%。</p>
        </div>
        <div class="flex-center">
            <img :src="imgData[3]" style="width:400px" alt="">
            <p style="text-indent: 2em;">
                在招聘渠道方面，我们通过系统平台开展校园招聘活动，展现了智慧的力量；此外，我们还运用系统平台推荐了204名优秀人才；通过企业官方网站，我们成功吸引了150位求职者；委托猎头服务机构，帮我们寻得了83名具备行业专业背景的应聘者；在线下招聘会上开展宣传咨询，吸引了75名求职者的关注；利用内推，成功引入了108位优秀人才；而其他途径，如校园组织等，则贡献了130位优秀人才。
            </p>
        </div>
        <div class="flex-center">
            <h1><strong>招聘优化方案</strong></h1>
            <p style="text-indent: 2em; padding: 4px;">强化校园招聘和内推机制:
                这两种渠道的候选人质量高，且成本相对较低。建议增加校园活动的频次和范围，同时提高内推奖励，激励员工参与人才推荐。</p>
            <p style="text-indent: 2em;padding: 4px;">提升线上招聘平台效果:
                系统平台和官方网站是重要的招聘渠道。建议优化网站用户体验，提高职位描述的吸引力，增加互动元素，如在线问答、虚拟招聘展等。
            </p>
            <p style="text-indent: 2em;padding: 4px;">稳定关键岗位招聘: 产品经理岗位申请量稳定，表明市场对此岗位的需求持续。应保持招聘力度，确保有足够候选人供选择。</p>
            <p style="text-indent: 2em;padding: 4px;">吸引资深人才: 资深候选人比例相对较低，建议通过提供更具竞争力的薪酬福利、职业发展路径和工作环境，吸引更多经验丰富的人才加入。
            </p>
            <p style="text-indent: 2em;padding: 4px;">
                通过对招聘数据的细致分析，我们可以发现公司的招聘流程整体运行良好，但仍有改进空间。通过优化招聘渠道、关注岗位需求变化和调整候选人经验结构，我们可以更有效地吸引和保留优秀人才，支持公司的持续发展和创新。</p>

            <el-button @click="downloadIMG">生成数据报表</el-button>
        </div>
    </el-dialog>
</template>

<script setup lang="ts">
//只有一个v-model，定义一个宏
import html2canvas from 'html2canvas';
const props=defineProps(['images'])
//获取图片数据！！！
const imgData=reactive(['','','',''])
watch([...props.images],(value)=>{
    Object.assign(imgData,value)
})


const visible = defineModel()

/* 下载数据报表 */
function downloadIMG() {
    const dom = document.getElementById("baobiao") as HTMLElement
    html2canvas(dom).then((canvas) => {
        downloadImage(canvas.toDataURL("image/png"), '数据报表.png')
    })
}
/* 自动下载图片 */
async function downloadImage(dataURL: string, name: string) {
    const link = document.createElement('a');
    link.href = dataURL;
    link.download = name;
    link.click();
}
</script>
